<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>bootstrap form</title>
<!-- Bootstrap core CSS -->
<link
	href="${basePath}commentResources/bootstrap-3.3.7-dist/css/bootstrap.min.css"
	rel="stylesheet">
<!-- Optional Bootstrap Theme -->
<link href="data:text/css;charset=utf-8,"
	data-href="${basePath}commentResources/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css"
	rel="stylesheet" id="bs-theme-stylesheet">
<!-- Bootstrap core JavaScript
		<!-- Placed at the end of the document so the pages load faster -->
<script
	src="${basePath}commentResources/jquery-1.12.4/jquery-1.12.4.min.js"></script>
<script
	src="${basePath}commentResources/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

<!-- bootstrap-datetimepicker -->
<link
	href="${basePath}commentResources/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css"
	rel="stylesheet" />
<script
	src="${basePath}commentResources/bootstrap-datetimepicker/js/moment-with-locales.min.js"></script>
<script
	src="${basePath}commentResources/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<!-- JQuery-validation -->
<script
	src="${basePath}commentResources/jquery-validation-1.17.0/dist/jquery.validate.min.js"></script>
<script
	src="${basePath}commentResources/jquery-validation-1.17.0/ext/jquery.validate.ext.js"></script>
<script type="text/javascript">
	//重置form表单验证
	function validateReset() {
		var validator = $("#userAddForm").validate();
		validator.resetForm();
		//$( "#stuInfoAddForm" ).contents().hasClass('.has-error').removeClass( "has-error" ).removeClass( "has-success" );
	}
	// dom加载完成时就执行该方法
	$(function() {
		$('#datetimepicker1').datetimepicker({
			format : 'YYYY-MM-DD HH:mm:ss',
			locale : moment.locale('zh-cn')
		});
		// 加载jquery validation前端验证
		validateUserInfoAddForm();
	});
	// jquery validation验证方法
	function validateUserInfoAddForm() {
		// 选取要验证的表单
		$("#userAddForm").validate(
				{
					/*  // 设置jquery validation 验证控件的调试模式，不调用后台
					debug: true, //调试模式取消submit的默认提交功能   
					//errorClass: "label.error", //默认为错误的样式类为：error   
					focusInvalid: false, //当为false时，验证无效时，没有焦点响应  
					onkeyup: false,   
					submitHandler: function(form){   //表单提交句柄,为一回调函数，带一个参数：form   
					    alert("提交表单");   
					    form.submit();   //提交表单   
					},  
 */
					// 验证规则		
					rules : {
						// 验证控件的id或name属性值（注意：单选、多选等组合控件使用name属性值）		
						userName :"required",/*  {
							required:true, */
							/* remote:使用ajax进行后台数据库验证
							   remote验证要求ajax的后台响应函数只能返回boolean类型的true或false
							*/
						/* remote: {
							    url: "${basePath}isUserNameUniqueAction",     //后台处理程序
							    type: "post",               //数据发送方式
							    dataType: "json",           //接受数据格式   
							    data: {                     //要传递的数据
							        userName: function() {
							        	// ajax发送的数据使用函数进行获取，注意函数需要使用return进行返回
							            return $("#userName").val();
							        },
	                				userAge:function(){
	                					return 20;
	                				}
							    }
							}
						}, */
						userPsw : "required",
						userBirthday : {
							required : true,
							date : true
						},
						userNumber :  "required", /*  {
							required ： true,
							idcard  : true
											},  */ 
						userAddress : "required",
						userSex : "required",
						userTel :"required"/* {
							required: true,
							allphone:true
						} */
					/* stuDepartment : {
								required : true									
							},
					stuImg : {
								required : true,
							} */
					},
					messages : {
						userName : "请输入用户姓名",/* {
							required : "请输入用户姓名",
							remote: "用户名已存在"
						} , */
						userPsw : "请输入用户密码",
						userBirthday : {
							required : "请选择出生日期",
							date : "出生日期格式不正确"
						},
						userNumber :   "请输入用户身份证号",/* {
							required ： "请输入用户身份证号",
							idcard  :  "身份证号不合法"
												},   */
						userAddress : "请输入用户地址",
						userSex : "请选择学生性别",
						userTel :"请输入联系电话"/* {
							required: "请输入联系电话",
							allphone:"输入的电话号码格式不正确"
						} */
					/* stuDepartment : {
								required : "请选择系别"									
							},
					stuImg : {
								required : "请选择头像"
							}*/
					},
					errorElement : "em",
					errorPlacement : function(error, element) {
						// 设置错误提示信息显示的位置
						error.addClass("help-block");

						if (element.is(":radio")) // 单选框信息显示的位置
							error.appendTo(element.parent().parent());
						else if (element.is(":checkbox"))// 多选框信息显示的位置
							error.appendTo(element.parent());
						else
							// 其他控件信息显示的位置
							error.appendTo(element.parent());
					},
					// 基于bootstrap设置控件以及错误信息的样式，需要导入bootstrap的css文件
					highlight : function(element, errorClass, validClass) {
						$(element).parents(".col-sm-4").addClass("has-error")
								.removeClass("has-success");
					},
					// 基于bootstrap设置控件验证成功之后的样式，需要导入bootstrap的css文件
					unhighlight : function(element, errorClass, validClass) {
						$(element).parents(".col-sm-4").addClass("has-success")
								.removeClass("has-error");
					}
				});
	}
</script>
<style>
/* .error{
color: red;
} */
</style>
</head>

<body>
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-12">
				<div class="row">
					<div class="col-md-3"></div>
					<div class="col-md-6">
						<form class="form-horizontal" action="${basePath}insertAction"
							method="post" id="userAddForm">
							<div class="form-group"></div>
							<div class="form-group">
								<label for="inputEmail3" class="col-sm-2 control-label">姓名</label>
								<div class="col-sm-4">
									<input type="text" class="form-control" id="userName"
										name="userName" placeholder="请输入用户姓名">
								</div>
								<label for="inputEmail3" class="col-sm-2 control-label">密码</label>
								<div class="col-sm-4">
									<input type="text" class="form-control" id="userPsw"
										name="userPsw" placeholder="请输入用户密码">
								</div>
							</div>

							<div class="form-group">
								<label for="inputPassword3" class="col-sm-2 control-label">出生日期</label>
								<div class="col-sm-4">
									<!-- <input type="text" class="form-control" id="stuBirthday"
										name="stuBirthday" placeholder="请选择出生日期"> -->
									<div class='input-group date' id='datetimepicker1'>
										<input type='text' class="form-control" id="userBirthday"
											name="userBirthday" /> <span class="input-group-addon">
											<span class="glyphicon glyphicon-calendar"></span>
										</span>
									</div>
								</div>
								<label for="inputPassword3" class="col-sm-2 control-label">身份证号</label>
								<div class="col-sm-4">
									<input type="text" class="form-control" id="userNumber"
										name="userNumber" placeholder="请输入用户身份证号">
								</div>
							</div>
							<div class="form-group">
								<label for="inputPassword3" class="col-sm-2 control-label">地址</label>
								<div class="col-sm-4">
									<input type="text" class="form-control" id="userAddress"
										name="userAddress" placeholder="请输入用户地址">
								</div>
							</div>
							<div class="form-group">
								<label for="inputEmail3" class="col-sm-2 control-label">性别</label>
								<div class="col-sm-4">
									<label class="radio-inline"> <input type="radio"
										id="userSex1" name="userSex" value="女"> 女
									</label> <label class="radio-inline"> <input type="radio"
										id="userSex2" name="userSex" value="男"> 男
									</label>
								</div>
								<label for="inputPassword3" class="col-sm-2 control-label">电话</label>
								<div class="col-sm-4">
									<input type="text" class="form-control" id="userTel"
										name="userTel" placeholder="请输入用户电话">
								</div>
							</div>

							<div class="form-group">
								<div class="col-sm-offset-4 col-sm-4">
									<button type="submit" id="btnSave" class="btn btn-default">保存</button>
									&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									<button type="reset" class="btn btn-default">重置</button>
								</div>
							</div>
						</form>
					</div>
					<div class="col-md-3"></div>
				</div>
			</div>
		</div>
	</div>

</body>

</html>